.enter {
  width: 432px;

  .inputLabel {
    @apply text-base font-semibold text-main mt-5;
    margin-bottom: 10px;
    line-height: 22px;
    &.inputTip {
      @apply text-sm font-normal text-main-aa;
    }
    span {
      &:nth-child(2) {
        @apply text-red;
        margin-left: 10px;
      }
    }
  }

  .stepBox {
    @apply flex items-center;
    height: 56px;
    .line {
      @apply w-20 block;
      height: 1px;
      background: #eee;
      margin: 31px;
    }
    .step {
      @apply relative rounded-50 h-8 w-8 cursor-pointer;
      background: rgba(216, 216, 216, 0.2);
      &::before {
        @apply absolute left-2/4 top-2/4 h-6 w-6 rounded-50;
        background: #d8d8d8;
        content: '';
        transform: translate(-50%, -50%);
      }
      .span {
        @apply absolute left-2/4 top-2/4 text-white text-xs font-semibold z-1;
        transform: translate(-50%, -50%);
      }
      &.stepActive {
        width: 56px;
        height: 56px;
        background: linear-gradient(90deg, #ffb521 0%, #ff651d 100%);
        &::before {
          @apply h-10 w-10 bg-white;
          border: 4px solid #000000;
        }
        .span {
          @apply text-main text-xl;
        }
      }
    }
  }

  .stepsBox {
    height: 460px;
  }
  .title {
    @apply flex items-center;
    font-family: Alibaba PuHuiTi 2;
    margin-bottom: 14px;
    margin-top: 60px;
    span {
      @apply text-main font-bold;
      font-family: Alibaba PuHuiTi 2;
      font-size: 28px;
    }

    img {
      @apply h-7;
      margin-left: 10px;
      width: 18px;
    }
  }
  .chooseType {
    @apply text-sm mb-10;
    line-height: 14px;
    color: #d8d8d8;
  }
  .roleChoose {
    .roleItem {
      @apply rounded bg-white flex items-center justify-between mt-5 border-2 border-solid border-transparent cursor-pointer;
      padding: 0 30px;
      width: 432px;
      height: 68px;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
      &:hover,
      &.roleItemActive {
        border-color: var(--theme-color);
      }
      .roleInfo {
        @apply flex-1;
        .name {
          @apply text-base leading-4 font-semibold  text-main;
          margin-bottom: 10px;
        }
        .desc {
          @apply text-xs leading-3;
          color: #c8c8c8;
        }
      }
      .head {
        width: 38px;
        height: 38px;
        margin-right: 10px;
      }
      .radio {
        @apply w-5 h-5 rounded-50 bg-white border border-2 relative;
        border-color: #d8d8d8;
        &::after {
          @apply absolute left-2/4 top-2/4 rounded-50;
          width: 9px;
          height: 9px;
          background-color: #d8d8d8;
          content: '';
          transform: translate(-50%, -50%);
        }
        &.radioActive {
          border-color: var(--theme-color);
          &::after {
            @apply bg-theme;
          }
        }
      }
    }
  }

  .stepTitle {
    @apply text-sm font-semibold;
    line-height: 14px;
    margin-bottom: 10px;
    margin-top: 30px;
    color: #333333;
    .error {
      @apply text-xs leading-3 text-red;
      margin-left: 10px;
    }
  }
  .checks {
    @apply mt-4;
    .space {
      @apply ml-10;
      &:nth-child(1),
      &:nth-child(5) {
        @apply m-0;
      }
    }
  }

  .emailBox {
    @apply flex;
    .emailInput {
      width: 220px;
    }
    .codeInput {
      @apply px-5;
      width: 202px;
      margin-left: 10px;
      input {
        @apply w-20;
      }
    }
    .getCode {
      @apply relative flex items-center justify-center shrink-0;
      width: 110px;
      height: 30px;
      border-left: 1px solid #d5d5d5;
      .code {
        @apply text-sm font-semibold text-theme cursor-pointer;
      }
      .wait {
        @apply text-sm font-medium text-main-aa cursor-pointer;
      }
    }
  }
  .tips {
    @apply text-main-aa text-xs leading-3;
    margin-bottom: 10px;
  }
  .submit {
    @apply w-full bg-theme mt-10;
    height: 60px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
    &.submitSpace {
      margin-top: 48px;
    }
    &:hover,
    &:active {
      @apply bg-main;
    }
  }
}
